<!--
 * @Author: Li Zengkun
 * @Date: 2022-09-23 10:58:52
 * @LastEditors: Li Zengkun
 * @LastEditTime: 2022-09-23 14:09:11
 * @Description: 
-->
<template>
  <div class="bg">
    <div class="shadow"></div>
    <el-card class="form-card" shadow="hover">
      <template #header>
        <div class="card-header">
          用户 注册
          <img style="width: 50px" src="@/assets/img/logo.png" />
        </div>
      </template>

      <el-form
        ref="RegisterFormRef"
        :rules="rules"
        :model="form"
        label-position="top"
        label-width="41px"
        status-icon
      >
        <el-form-item label="账号:" prop="username">
          <el-input v-model="form.username">
            <template #prefix>
              <el-icon><User /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="昵称:" prop="fullname">
          <el-input v-model="form.fullname">
            <template #prefix>
              <el-icon><Avatar /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="密码:" prop="password">
          <el-input type="password" show-password v-model="form.password">
            <template #prefix>
              <el-icon><Lock /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="再次密码:" prop="rePassword">
          <el-input type="password" show-password v-model="form.rePassword">
            <template #prefix>
              <el-icon><Lock /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-radio-group v-model="form.sex">
            <el-radio label="男">男</el-radio>
            <el-radio label="女">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="手机号:" prop="tel">
          <el-input v-model="form.tel">
            <template #prefix>
              <el-icon><Phone /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button round type="primary" :loading="loading" @click="submitForm"
            >注册</el-button
          >
        </el-form-item>
      </el-form>
      <el-row justify="space-between">
        <el-col :span="6" style="text-align: center">
          <el-link type="info" href="/#/user/login">登录账号</el-link>
        </el-col>
        <el-col :span="7" style="text-align: center">
          <el-link type="info" href="">《用户须知》</el-link>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>
 
<script setup>
import { ref, reactive } from "vue";
import { useElMessage } from "@/assets/js";
import { account } from "@/api";
import { useRouter } from "vue-router";

let router = useRouter();

const RegisterFormRef = ref(null);

let loading = false;

const form = reactive({
  username: "",
  fullname: "",
  password: "",
  rePassword: "",
  tel: "",
  sex: "男",
});

const checkPassword = (rule, value, callback) => {
  if (value === "") {
    callback(new Error("请再次输入密码"));
    return;
  }
  if (value !== form.password) {
    callback(new Error("两次密码输入不一致"));
    return;
  }
  callback();
};

const rules = reactive({
  username: [{ required: true, message: "请填写账号", trigger: "blur" }],
  fullname: [{ required: true, message: "请填写昵称", trigger: "blur" }],
  tel: [
    { required: true, message: "请输入手机号", trigger: "blur" },
    { min: 11, max: 11, message: "请输入11位手机号", trigger: "blur" },
    {
      pattern:
        /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/,
      message: "请输入正确的手机号码",
    },
  ],
  password: [
    { required: true, message: "请填写密码", trigger: "blur" },
    { pattern: /\d{3,}/, message: "密码长度至少三位数字", trigger: "blur" },
  ],
  rePassword: [
    { required: true, validator: checkPassword, trigger: "blur" },
    { pattern: /\d{3,}/, message: "密码长度至少三位数字", trigger: "blur" },
  ],
  sex: [{ required: true, message: "请选择性别", trigger: "blur" }],
});

const submitForm = async () => {
  RegisterFormRef.value.validate(async (valid) => {
    if (valid) {
      loading = true;
      // 注册
      await account.register(form).then((res) => {
        console.log(res);
        if (res.status) {
          sessionStorage.setItem("token", res.data.token);
          sessionStorage.setItem("id", res.data.id);
          sessionStorage.setItem("role", res.data.role);
          useElMessage("success", res.msg+'2s后自动跳转');
          setTimeout(() => {
            router.replace('/front-end/home')
          }, 2000);
        } else {
          useElMessage("error", res.msg);
        }
      });
      loading = false;
      return;
    } else {
      useElMessage("warning", "请填写完整表单");
      return;
    }
  });
};
</script>

<style lang='less' scoped>
.bg {
  position: relative;
  min-height: 100vh;
  background-image: url("@/assets/img/login/bg.jpg");
  background-position: top center;
  background-size: cover;
  animation: chengeBg 30s infinite;
  .shadow {
    position: absolute;
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.5);
  }
  .form-card {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 360px;
    transform: translateX(-50%) translateY(-50%);
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(5px);
    border-radius: 10px;
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .el-button {
      width: 100%;
    }
  }
}
</style>
